/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, TextArea, BlobInputList, IconCheckSquare, IconSquare, InputLine, CheckSwitch, CCell, Table, TableRow, TableBody, Cell, LineColumn,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,
} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";


export interface Props extends InternalItemProps {
    label: string;
    iAname?: string[];           //附加的存储那些字段     ，'观测备注'
}
const item宏观检查=[['宏锅筒','锅筒'],['省煤','省煤'],['水冷','水冷'],['过热','过热'],['再热','再热'],['接管','锅炉范围内管道及主要连接管'],['其它','其它']];
export const itemA宏观检查: string[] = ['宏观备注','宏观结果', ];
item宏观检查.forEach(([name, title], i: number) => {
    itemA宏观检查.push(name as string);
});

export const Macroscopic =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, iAname,}: Props, ref
    ) => {
        const {inp, setInp} = useItemInputControl({ref});
        const itemA = React.useMemo(() => {
            return [ ...iAname ?? [], ...itemA宏观检查 ,];
        }, [ iAname]);
        const [getInpFilter] = useMeasureInpFilter(null, itemA,);
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label}>
                <Text variant="h5">{label}：</Text>
                <LineColumn column={4}>
                    { item宏观检查.map(([name,desc] : any, i:number)=> {
                        return <InputLine key={i} label={`${desc}:`}>
                            <CheckSwitch  checked={inp?.[name] || false} onChange={e => setInp({...inp, [name]: inp?.[name]? undefined:true}) } />
                        </InputLine>;
                    }) }
                </LineColumn>
                检验范围及发现缺陷和问题的位置、性质、程度：
                <TextArea  value={inp?.宏观备注 ||''} rows={8}
                           onChange={e => setInp({ ...inp, 宏观备注: e.currentTarget.value||undefined}) } />
                宏观检验报告-结果：
                <BlobInputList  value={inp?.宏观结果 ||''} rows={3} onListChange={v => setInp({...inp,宏观结果:v || undefined}) }
                                datalist={['所检部位未见异常。','符合要求。']}
                />
                {children}
            </InspectRecordLayout>
        );
    });


export const MacroscopicVw= ({orc, rep} :{orc:any, rep:any}
) => {
    return <>
        <div css={{"@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}} }>
            <Text id='Macroscopic' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
            }}>宏观检查报告</Text>
            <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text></Text>
                <Text>报告编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={ ["%" ] } css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}}} tight  miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'Macroscopic'}>
                    <TableRow>
                        <CCell>检验范围及发现缺陷和问题的位置、性质、程度</CCell>
                    </TableRow>
                    <TableRow><Cell>
                            <div css={{display: 'flex', flexDirection: 'row',flexWrap: 'wrap'}}>
                                （
                                {item宏观检查.map(([name,desc]: any, i: number) => {
                                    return <div key={i} css={{display: 'flex', alignItems: 'center'}}>{orc?.[name] ?
                                        <IconCheckSquare size='sm'/> : <IconSquare size='sm'/>}&nbsp;{desc}&nbsp;</div>;
                                })}
                                 ) 系统
                            </div>
                    </Cell></TableRow>
                    <TableRow>
                        <Cell>
                            <div css={{
                                minHeight: '4rem', whiteSpace: 'pre-wrap'
                            }}>{orc.宏观备注 ?? '／'}</div>
                        </Cell>
                    </TableRow>
                    <TableRow>
                        <Cell>
                            <div css={{
                                minHeight: '3rem', whiteSpace: 'pre-wrap'
                            }}>检验结果：（依据使用单位处理或整改情况确定）<br/>
                                {orc.宏观结果 ?? '／'}</div>
                        </Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
        <TailMenRowIspCheck orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
        </TailMenRowIspCheck>
        <Text css={{fontSize:'0.7rem'}}>
            注：检验结果栏中，打“√”表示该项目无问题或者合格，打“×”表示该项目有问题或者不合格，填写“无此项的表示实
            际没有的检验项目，划“－”表示该项目无法检验。
        </Text>
    </>;
};
